<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex' //引入mapState
	export default {
		computed: mapState(['url', 'musicList', 'detail', 'audio', 'musicIndex', 'mode']),
		methods: {
			...mapMutations(['setAudioSrc', 'setDetail', 'changeMusicList', 'changeArtists', 'changeLikeMusic', 'play']),
			...mapActions(['getAudioSrc', 'getLyric']),
		},
		onLaunch: function() {
			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
			console.log('App Launch')
			let that = this
			//获取音乐url
			uni.getStorage({
				key: 'detail',
				success: function(res) {
					// console.log(res.data); 
					if (res.data) {
						that.setDetail(res.data)
						uni
							.request({
								url: that.url + `/song/url?id=${res.data.id}`
							})
							.then((res) => {
								// console.log(res.data);
								if (res.data.data[0].url) {

									that.setAudioSrc(res.data.data[0].url)
								}
							})
							.catch((err) => {
								console.error(err);
							});
					}

				}
			});
			this.audio.onEnded(() => {
				// console.log(this.mode);
				if (this.mode === 1) {
					//单曲循环
					this.play()
				} else if (this.mode === 2) {
					//console.log(22);
					let num = this.musicIndex + 1
					if (num >= this.musicList.length) {
						num = 0
					}

					this.setDetail(this.musicList[num])
					this.getAudioSrc(this.detail.id)
					this.getLyric(this.detail.id)
				} else if (this.mode === 3) {
					let num = Math.floor(Math.random() * this.musicList.length);
					this.setDetail(this.musicList[num])
					this.getAudioSrc(this.detail.id)
					this.getLyric(this.detail.id)
				};
			})
			//获取歌曲演唱者
			uni.getStorage({
				key: 'artists',
				success: function(res) {
					that.changeArtists(res.data)
				}
			})
			//获取当前播放列表
			uni.getStorage({
				key: 'musicList',
				success: function(res) {
					that.changeMusicList(res.data)
				}
			})
			//获取喜欢的音乐列表
			uni.getStorage({
				key: 'likeMusic',
				success: function(res) {
					that.changeLikeMusic(res.data)
				}
			})
		},
		onShow: function() {
			console.log('App Show')

		},
		onHide: function() {
			console.log('App Hide')
		}

	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import '@/uni_modules/uni-scss/index.scss';
	/* #ifndef APP-NVUE */
	@import '@/static/customicons.css';
	@import "@/static/iconfont.css";

	// 设置整个项目的背景色
	page {
		background-color: #f5f5f5;
	}

	@keyframes rotate {
		from {
			transform: rotate(0);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* #endif */
	.example-info {
		font-size: 14px;
		color: #333;
		padding: 10px;
	}
</style>
